<template>
  <div class="homecover">
    <div class="caption">
      <div class="t">我们的使命</div>
      <div class="b">用科技和服务提升人们健康幸福生活指数</div>
    </div>
    <ul class="category">
      <li class="line">60家<br />门店分布广泛</li>
      <li class="line">10年<br />团队深耕服务领域</li>
      <li>6w+<br />会员成功摆脱病痛</li>
    </ul>
  </div>
</template>

<script>
// 此行导入其他文件（如组件，工具js，第三方插件js，json文件，图片文件等）
export default {
  name: "HomeCover",
  props: {},
  components: {},
  data() {
    return {};
  },
};
</script>

<style scoped>
/* @import url(); 引入公共css类 */
.homecover {
  background-image: url("~assets/image/home/bgi.png");
  background-size: cover;
  height: 3.11rem;
  font-size: 0.14rem;
  color: #fff;
  position: relative;
}
.homecover .caption {
  padding-top: 0.89rem;
  margin-left: 0.55rem;
  color: #0c5da9;
  font-weight: bold;
}
.homecover .caption .t {
  font-size: 0.42rem;
}
.homecover .caption .b {
  font-size: 0.19rem;
  margin-top: 0.12rem;
  letter-spacing: 0.04rem;
}
.homecover .category {
  display: flex;
  width: 7.5rem;
  height: 0.49rem;
  background-color: rgb(0, 0, 0);
  opacity: 0.5;
  position: absolute;
  bottom: 0;
  padding-left: 1.28rem;
  font-size: 0.12rem;
}
.homecover .category li {
  padding-right: 1.01rem;
  line-height: 130%;
  display: flex;
  align-items: center;
  position: relative;
}
.homecover .category li.line::after {
  width: 1px;
  height: 0.36rem;
  content: "";
  background-color: #fff;
  position: absolute;
  bottom: 0;
  right: 0.51rem;
}
</style>
